<template>
  <div>
    <page-list :x-uri="uri" :custom-components="custom" :search-options="searchOptions" :checkbox-item="false" :doactions="doactions">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button v-auth="'finance.order.classes.export'" size="mini" type="primary" @click="exportOrder">导出订单</el-button>
      </template>
    </page-list>
    <el-dialog title="订单详情" :visible.sync="visible" width="60%" top="7.5vh" :close-on-click-modal="false">
      <el-form label-width="200px" size="mini">
        <el-form-item label="订单号">
          <span>{{ order.order_sub_no }}</span>
        </el-form-item>
        <el-form-item label="课程名称">
          <span>{{ order.product_title }}</span>
        </el-form-item>
        <el-form-item label="机构">
          <span>{{ order.school_name }}</span>
        </el-form-item>
        <el-form-item label="课程价格">
          <span>{{ order.original_price | moneySymbol }}</span>
        </el-form-item>
        <el-form-item label="订单价格">
          <span>{{ order.payment | moneySymbol }}</span>
        </el-form-item>
        <el-form-item label="优惠价格">
          <span>{{ ((order.original_price * 100 - order.payment * 100) / 100) | moneySymbol }}</span>
        </el-form-item>
        <el-form-item label="购买者手机号">
          <span>{{ order.phone }}</span>
        </el-form-item>
        <el-form-item label="下单时间">
          <span>{{ order.create_time }}</span>
        </el-form-item>
        <el-form-item label="支付时间">
          <span v-if="order.payment_time">{{ order.payment_time }}</span>
          <span v-else>-</span>
        </el-form-item>
        <el-form-item label="支付方式">
          <span v-if="order.payment_time">{{ order.payment_type_text }}</span>
          <span v-else>-</span>
        </el-form-item>
        <el-form-item label="订单来源">
          <span>{{ order.from }}</span>
        </el-form-item>
        <el-form-item label="订单状态">
          <span>{{ order.status_text }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import PageList from '@public/template/page_list.vue';
import Price from '../../video/order/components/price.vue';
import Discount from '../../video/order/components/discount.vue';
import ProductTitle from '../../video/order/components/title.vue';
import { shortcutsLayterThreeMonth } from '@/common/js/const.js';
import Tabs from '@/pages/finance/order/tab/index.vue';
import { Loading } from 'element-ui';
export default {
  components: {
    PageList,
    Tabs
  },
  inject: ['reload'],
  data() {
    return {
      uri: 'course/admin/classes/order/list',
      visible: false,
      order: {},
      custom: {
        price: Price,
        discount: Discount,
        product_title: ProductTitle
      },
      searchOptions: {
        time: {
          shortcuts: shortcutsLayterThreeMonth
        }
      },
      doactions: [
        {
          title: '退款',
          meta: { permission: 'finance.order.classes.refund' },
          callback: this.refund,
          display: ({ row }) => {
            return row.status == 20 && !row.delete_time;
          }
        },
        { title: '详情', meta: { permission: 'finance.order.classes.detail' }, callback: this.info }
      ]
    };
  },
  methods: {
    info: function({ row }) {
      this.order = row;
      this.visible = true;
    },
    refund: function({ row }) {
      if (row.status != 20) {
        this.$message.warning('此订单无法进行退款');
      }
      this.$box
        .confirm('该操作将删除订单，分成的金额将无法退回，确认退款吗')
        .then(() => {
          this.$http.delete(
            '/admin/order/refund/' + row.order_sub_no,
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    /**
     * 导出订单
     */
    exportOrder: function() {
      const search = this.$store.getters['pageList/search/data'];
      const loadingInstance = Loading.service({
        text: '正在导出文件，请稍后...'
      });

      this.$http
        .downloadExcel('course/admin/classes/order/export', search)
        .then(() => {
          loadingInstance.close();
          this.$message.success('下载成功');
        })
        .catch(msg => {
          loadingInstance.close();
          this.$message.error(msg);
        });
    }
  }
};
</script>
